<template>
	<view class="container">
		<view class="classify">
			<view class="classify_top">
				<view v-for="(item,index) in sortList" :key="index" :class="{sort:true,active:index===active}"
					@click="handleSort(index)">
					{{item}}
				</view>
			</view>
			<!-- 不为空 -->
			<view class="classify_cont" v-if="proList.length">
				<navigator class="pro_item" open-type="navigate" :url="`/detail/detail?id=${pro.id}`"
					v-for="(pro,i) in proList" :key="i">
					<image :src="pro.s_goods_photos[1].path" mode="widthFix" style="width: 350rpx;">
					</image>
					<view class="pro_center">{{pro.name}}</view>
					<view class="pro_bottom">
						<text class="price">￥{{pro.sale_price}}</text>
						<text class="sale">销量{{pro.sold_num}}笔</text>
					</view>
				</navigator>
			</view>
			<!-- 为空 -->
			<view class="empty" v-else>
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text='没有更多商品了'>
				</u-empty>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				id: null,
				title: '',
				searchName: '',
				proList: [],
				active: 0,
				priceSort: '',
				sortList: ['综合', '销量', '价格', '筛选']
			}
		},
		computed: {
			...mapState('tabBar', ['value'])
		},
		methods: {
			...mapMutations('tabBar', ['changeValue']),
			// 分类商品信息
			async getClassifyPro() {
				let {
					data
				} = await uni.$http.get('/api/goods', {
					project_id: 295,
					classify_id: this.id
				})
				this.proList = data.result.rows
			},
			getSearchPro() {
				uni.$http.get('/api/goodsSearch', {
					project_id: 295,
					name: this.searchName
				}).then(res => {
					this.proList = res.data.result.rows
				})
			},
			handleSort(index) {
				this.active = index
				if (index === 2) {
					this.priceSort = this.priceSort === 'up' ? 'down' : 'up';
				}
			}
		},
		onLoad(options) {
			// console.log('onLoad');
			this.changeValue(1)
			if (options.id) {
				this.id = options.id
				this.title = options.title
				this.getClassifyPro()
			}
			if (options.name) {
				this.searchName = options.name
				this.getSearchPro()
			}
		},
		onReady() {
			if (this.title) {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
			if (this.searchName) {
				uni.setNavigationBarTitle({
					title: `搜索结果 - ${this.searchName}`
				})
			}
		},
		// onHide() {
		// 	console.log('onHide');
		// },
		// onUnload() {
		// 	console.log('onUnload');
		// },
	}
</script>

<style lang="scss" scoped>
	.classify {
		padding-bottom: 1px;

		.classify_top {
			display: flex;
			align-items: center;
			justify-content: space-around;
			background-color: #fff;
			font-size: 15px;

			.sort {
				line-height: 35px;
			}

			.active {
				color: #884e22;
				font-weight: 600;
			}
		}

		.empty {
			background-color: #fff;
		}

		.classify_cont {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;
			margin-bottom: 60px;
			padding-top: 8px;

			.pro_item {
				margin-bottom: 8px;
				font-size: 14px;
				background-color: #fff;
				border-radius: 5px;

				.pro_center {
					padding: 10px 16rpx 5px;
				}

				.pro_bottom {
					position: relative;
					padding: 5px 14rpx;

					.price {
						font-weight: 600;
						color: #FF4433;
					}

					.sale {
						color: #999999;
						position: absolute;
						right: 14rpx;
						font-size: 12px
					}
				}
			}
		}
	}
</style>